<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<link rel="stylesheet" href="css/index.css" />
		<script src="js/vue.js"></script>
		<script src="js/elementui.js"></script>
		<script src="js/axios.js"></script>
		<script src="js/common.js"></script>


	</head>
	<body>
		<div id="app">
			<el-table :data="tableData" border style="width: 100%" size="mini">
				<el-table-column prop="rolenane" label="角色名字" width="180">
				</el-table-column>
				<el-table-column prop="description" label="角色描述" width="180">
				</el-table-column>

				<el-table-column label="操作">
					<template slot="header" slot-scope="scope">
						<el-button type="primary" size="mini" @click="add(scope.$index, scope.row)">增加</el-button>
					</template>
					<template slot-scope="scope">
						<el-button size="mini" @click="set(scope.row)">编辑</el-button>
						<el-button type="warning" size="mini"
							@click="uprolemenu(scope.$index, scope.row)">角色菜单</el-button>

					</template>
				</el-table-column>

			</el-table>
			<!-- 新增 -->
			<el-dialog :title="角色新增" :visible.sync="addbol" width="30%">
				<el-form :model="role" label-width="80px">
					<el-form-item label="角色id" style="display: none;">
						<el-input v-model="role.id" :disabled="true"></el-input>
					</el-form-item>
					<el-form-item label="角色名称">
						<el-input v-model="role.rolename"></el-input>
					</el-form-item>
					<el-form-item label="角色描述">
						<el-input v-model="role.description"></el-input>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="addbol = false">取 消</el-button>
					<el-button type="primary" @click="insert">确 定</el-button>
				</span>
			</el-dialog>
			<!-- 修改 -->
			<el-dialog :title="角色修改" :visible.sync="setbol" width="30%">
				<el-form :model="role" label-width="80px">
					<el-form-item label="角色id" style="display: none;">
						<el-input v-model="role.id" :disabled="true"></el-input>
					</el-form-item>
					<el-form-item label="角色名称">
						<el-input v-model="role.rolename"></el-input>
					</el-form-item>
					<el-form-item label="角色描述">
						<el-input v-model="role.description"></el-input>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="setbol = false">取 消</el-button>
					<el-button type="primary" @click="uprole">确 定</el-button>
				</span>
			</el-dialog>

			<el-drawer title="角色菜单维护" :visible.sync="drawer" :with-header="true">
				&nbsp;
				<el-button type="primary" size="mini" @click="uprolemenusubmit()">确定修改角色菜单</el-button>

				<el-tree ref="tree" :data="treeData" @check="trchange" show-checkbox default-expand-all node-key="id"
					check-strictly="true" highlight-current>
				</el-tree>
			</el-drawer>

		</div>

		<script>
			new Vue({
				el: "#app",
				data: {
					tableData: [],
					drawer: false, //控制角色菜单维护抽屉的显示
					treeData: [],
					nowroleid: 0,
					addbol: false,
					setbol: false,
					role: {
						id: '',
						rolename: '',
						description: ''
					}
				},
				methods: {
					initTableData() {
						let that = this
						axios.get(API + "selectAllRole").
						then(function(res) {
							console.log(res.data.data.list)
							that.tableData = res.data.data.list
						}).catch(err => {
							console.log(err)
						});
					},
					add() {
						this.cliner();
						this.addbol = !this.addbol
					},
					insert(){
						var that =this;
						console.log(this.role);
						axios.post(API + "inserRole/"+this.role.rolename+"/"+this.role.description).then(function(res) {
							console.log(res);
							that.$message({
								message: '角色新增成功',
								type: 'success'
							});
						});
						this.addbol = false;
						this.initTableData();
					},
					set(row){
						this.cliner();
						this.setbol = !this.setbol
						this.role.id=row.id;
						this.role.rolename=row.rolenane;
						this.role.description=row.description;
					},
					uprole() {
						var that =this;
						axios.post(API + "updateRole",{
							id:that.role.id,
							rolenane:that.role.rolename,
							description:that.role.description
						}).then(function(res) {
							console.log(res);
							that.$message({
								message: '角色修改成功',
								type: 'success'
							});
						});
						this.setbol = false;						
						this.initTableData();
					},
					cliner(){
						this.role= {
							id: '',
							rolename: '',
							description: ''
						}
					},
					uprolemenusubmit() {
						var that = this;
						let treeNowArr = this.$refs.tree.getCheckedKeys(); //获取树当前选中的所有节点
						console.log(treeNowArr);
						axios.post(API + "updateRoleMenuId/", {
							roleid: that.nowroleid,
							listMenu: treeNowArr
						}).
						then(function(res) {
							console.log(res);
							that.$message({
								message: '角色菜单修改成功',
								type: 'success'
							});
							that.drawer = false;

						})
					},
					uprolemenu(i, row) {
						this.nowroleid = row.id;
						this.initTreeData() //初始化菜单树的数据
						//根据角色id获取菜单集合
						let that = this
						axios.get(API + "selectRoleMenuById/" + row.id).
						then(function(res) {
							console.log(res);
							let slist = res.data.data.rolemenuList
							const arr = slist.map((obj) => obj.menuid); //取数组里面对象的属性
							that.$refs.tree.setCheckedKeys(arr);
						}).catch(err => {
							console.log(err)
						});
						this.drawer = true
					},
					initTreeData() {
						let that = this
						axios.get(API + "menuList").
						then(function(res) {
							console.log(res);
							let arrs = arrayToTree(res.data.data.list)
							that.treeData = arrs
						}).catch(err => {
							console.log(err)
						});
					},
					trchange(a, b) { //树的被选中对象
						console.log(a.children);
						let treeNowArr = this.$refs.tree.getCheckedKeys(); //获取树当前选中的所有节点
						treeNowArr.push(a.parentld); //把当前节点的父id加入到树里面
						console.log(treeNowArr);
						if (a.children != null) {
							const childrenArr = a.children.map((obj) => obj.id) //获取当前节点的所有子节点的id集合
							console.log(childrenArr);
							treeNowArr = treeNowArr.filter(item => !childrenArr.includes(item)); //过滤掉子节点的id
						}
						this.$refs.tree.setCheckedKeys(treeNowArr);
					}
				},
				mounted() {
					this.initTableData()
				}
			})
		</script>
	</body>
</html>